.media-h {
    @media screen and (min-width: 744px){
        height: 80px !important;
    }
}
$media:(
    'sm':640px,
    'md':744px,
    'lg':1024px,
    'xl':1128px,
    //'2xl':1536px,
);

@each $key,$value in $media{
    .media-#{$key}-left{
        @media screen and (min-width:#{$value}) {
            left: 80px  !important;
        };
    }
    .media-#{$key}-top{
        @media screen and (min-width:#{$value}) {
            top: 16px  !important;
            width: 460px !important;
            transition: width 200ms ease-in !important;
        };
    }
    .media-#{$key}-ul{
        @media screen and (min-width:#{$value}) {
            position: absolute !important;
            top: 100% !important;
            width: 100% !important;
        };
    }
}
@each $key,$value in $media{
    .#{$key}-none{
        @media screen and (min-width:#{$value}) {
            display: none  !important;
        };
    }
}

